<template>
  <view class="page-container">
    <uni-nav-bar fixed shadow :border="false" :title="title" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="page-body" >
      <view class="config-list">
        <view class="config-item flex-wrap flex-middle"
              v-for="(item, index) in practicesubList"
              :key="index"
              @click="toPage(item.value, detail.questionsTypeCounMap[item.value] || 0)">
          <image
              class="config-item-icon"
              :style="{
                        background: 'url(' + item.img + ') no-repeat'
                    }"></image>
          <text class="flex-item fs-14 fc-333 fw-b">{{item.text}}</text>
          <text class="fs-14 fc-999 select-icon">{{ detail.questionsTypeCounMap[item.value] || 0 }}题</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {onLoad, onLaunch, onShow} from '@dcloudio/uni-app'
import {ref, onMounted, watch, computed, getCurrentInstance} from 'vue';
const {$api, $uniPush, $toast, $dialog} = getCurrentInstance().proxy;

const title = ref('题型练习');
const saveLoading = ref(false);
const fullscreenLoading = ref(true);
const id = ref('');
const detail = ref({
	questionsTypeCounMap:{'R': 5}
});
const listData = ref([]);
const practicesubList = ref([
  {
    text: "单选题",
    img: "/static/image/practice-type-1.png",
    value: "R",
  }, {
    text: "多选题",
    img: "/static/image/practice-type-2.png",
    value: "M",
  }, {
    text: "判断题",
    img: "/static/image/practice-type-3.png",
    value: "T",
  }, {
    text: "填空题",
    img: "/static/image/practice-type-4.png",
    value: "F",
  }, {
    text: "简答题",
    img: "/static/image/practice-type-5.png",
    value: "A",
  }
]);
const onClickLeft = () => {
  uni.navigateBack({ delta: 1 })
};
const toPage = (type, num) => {
	 handlePage(type, 2)
};

const handlePage = (type, iscontinue) => {
    $uniPush({
      name: "practice-detail-id",
      params: {
        id: id.value,
        iscontinue: iscontinue
      },
      query: {
        type: type
      }
    })
};
</script>

<style lang="scss" scoped>
.page-container {
  background: #F6F6F6;
  min-height: 100vh;
  .page-body{
    padding: 10px 0 50px;
    .config-list{
      padding: 15px;
      .config-item{
        position: relative;
        padding: 20px;
        background: #fff;
        border-radius: 6px;
        overflow: hidden;
        & + .config-item{
          margin-top: 10px;
        }
        .config-item-icon{
          display: inline-block;
          width: 20px;
          height: 20px;
          background-size: cover !important;
          margin-right: 10px;
        }
        .page-btn-icon{
          position: absolute;
          width: 72px;
          height: 20px;
          background: #1EA69D;
          text-align: center;
          color: #fff;
          transform: rotate(45deg);
          right: -17px;
          top: 9px;
          line-height: 20px;
          font-size: 10px;
          &.icon-R{
            background: #1EA69D;
          }
          &.icon-M{
            background: #4DAAFD;
          }
          &.icon-T{
            background: #ECC542;
          }
          &.icon-F{
            background: #E76D6D;
          }
          &.icon-A{
            background: #7A47C2;
          }
        }
      }
    }
  }
}
</style>
